<template>
  <!--面包屑导航-->
    <el-row style="margin: 5px 5px;">
        <el-col :span="24">
            <el-breadcrumb :separator-icon="ArrowRight">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>仓库管理</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/home/store/setting' }">仓库设置</el-breadcrumb-item>
                <el-breadcrumb-item>库区设置</el-breadcrumb-item>
            </el-breadcrumb>
        </el-col>
    </el-row>
  <!--查询条件区-->
    <el-row style="margin: 5px 5px;">
        <el-col :span="24">
            <el-form v-model="searchWarehouseArea" style="margin: 15px 0px 0px 0px" inline>
                <el-form-item style="width: 300px;" label="库区名称">
                    <el-input v-model="searchWarehouseArea.warehouseAreaName"/>
                </el-form-item>
                <el-form-item>
                    <el-button @click="search" type="primary">搜索</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button @click="cancelSearch">重置</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>

  <!--按钮功能区-->
    <el-row style="margin: 5px 5px;">
        <el-col :span="24">
            <el-button-group>
                <el-button @click="insertWarehouse" type="primary" plain>
                    新增
                </el-button>
                <el-button @click="updateWarehouseArea(chooseIds)" :disabled="chooseIds.length != 1" type="success" plain>
                    修改
                </el-button>
                <el-button @click="deleteWHLAList" :disabled="chooseIds.length == 0"  type="danger" plain>
                    删除
                </el-button>
            </el-button-group>
        </el-col>
    </el-row>

  <!--表格主体-->
    <el-row style="margin: 5px 5px;">
        <el-col :span="24">
            <el-table
                    :data="warehouseAreaList"
                    broder
                    :stripe="true"
                    row-key="warehouseAreaId"
                    size="small"
                    @selection-change="changeChooses"
            >
                <el-table-column align="center" type="selection" width="55"/>
                <el-table-column align="center" label="仓区编号">
                    <template #default="scope">
                        <el-link @click="loadDesc(scope.row.warehouseAreaId)" style="font-size: small" type="primary">{{scope.row.warehouseAreaId}}</el-link>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="warehouseAreaName" label="库区名称"/>
                <el-table-column align="center" label="库区面积">
                    <template #default="scope">
                        {{scope.row.warehouseAreaArea}} ㎡
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="warehouseAreaDirector" label="库区负责人"/>
                <el-table-column align="center" prop="warehouseAreaNotes" label="库区备注"/>
                <el-table-column width="150" align="center" label="操作">
                    <template #default="scope">
                        <el-row>
                            <el-col :span="8">
                                <el-link @click="getLocationList(scope.row.warehouseAreaId)" type="primary">
                                    <el-icon><OfficeBuilding /></el-icon>
                                    库位
                                </el-link>
                            </el-col>
                            <el-col :span="8">
                                <el-link @click="updateWarehouseArea(scope.row.warehouseAreaId)" type="primary">
                                    <el-icon>
                                        <EditPen/>
                                    </el-icon>
                                    修改
                                </el-link>
                            </el-col>
                            <el-col :span="8">
                                <el-link @click="deleteTheWarehouseArea(scope.row.warehouseAreaId)" type="primary">
                                    <el-icon>
                                        <DeleteFilled/>
                                    </el-icon>
                                    删除
                                </el-link>
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>
  <!--分页-->
  <!--分页栏-->
    <el-row style="margin: 5px 5px;">
        <!-- 监听页码的变化事件 -->
        <el-pagination @change="changePage" :total="total" background layout="prev, pager, next"/>
    </el-row>
    <el-dialog
        v-model="dialogWarehouseAreaInsert"
        title="库区新增"
    >
        <el-form v-model="warehouseAreaInsert" label-width="auto">
            <el-form-item label="库区名称">
                <el-input v-model="warehouseAreaInsert.warehouseAreaName"/>
            </el-form-item>
            <el-form-item label="库区面积">
                <el-input-number min="1" v-model="warehouseAreaInsert.warehouseAreaArea"/>
            </el-form-item>
            <el-form-item label="库区负责人">
                <el-input v-model="warehouseAreaInsert.warehouseAreaDirector"/>
            </el-form-item>
            <el-form-item label="库区备注">
                <el-input type="textarea" v-model="warehouseAreaInsert.warehouseAreaNotes"/>
            </el-form-item>
            <el-form-item label="X轴库位数量">
                <el-input-number min="1" v-model="warehouseAreaInsert.warehouseAreaNumberX"/>
            </el-form-item>
            <el-form-item label="Y轴库位数量">
                <el-input-number min="1" v-model="warehouseAreaInsert.warehouseAreaNumberY"/>
            </el-form-item>
            <el-form-item label="Z轴库位数量">
                <el-input-number min="1" v-model="warehouseAreaInsert.warehouseAreaNumberZ"/>
            </el-form-item>
            <el-form-item>
                <el-button @click="insertWHA()" type="primary">提交</el-button>
                <el-button @click="cancelInsert">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <el-dialog
        v-model="dialogWarehouseAreaUpdate"
        title="库区修改"
    >
        <el-form v-model="warehouseAreaUpdate" label-width="auto">
            <el-form-item label="库区名称">
                <el-input v-model="warehouseAreaUpdate.warehouseAreaName"/>
            </el-form-item>
            <el-form-item label="库区面积">
                <el-input-number min="1" v-model="warehouseAreaUpdate.warehouseAreaArea"/>
            </el-form-item>
            <el-form-item label="库区负责人">
                <el-input v-model="warehouseAreaUpdate.warehouseAreaDirector"/>
            </el-form-item>
            <el-form-item label="库区备注">
                <el-input type="textarea" v-model="warehouseAreaUpdate.warehouseAreaNotes"/>
            </el-form-item>
            <el-form-item label="X轴库位数量">
                <el-input-number min="1" v-model="warehouseAreaUpdate.warehouseAreaNumberX"/>
            </el-form-item>
            <el-form-item label="Y轴库位数量">
                <el-input-number min="1" v-model="warehouseAreaUpdate.warehouseAreaNumberY"/>
            </el-form-item>
            <el-form-item label="Z轴库位数量">
                <el-input-number min="1" v-model="warehouseAreaUpdate.warehouseAreaNumberZ"/>
            </el-form-item>
            <el-form-item>
                <el-button @click="updateHWA" type="primary">提交</el-button>
                <el-button @click="cancelUpdate">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!--详情弹窗-->
    <el-dialog
        v-model="dialogWarehouseAreaDesc"
    >
        <el-descriptions title="库区详情">
            <el-descriptions-item align="left" label="库区编号">{{ warehouseAreaDesc.warehouseAreaId }}</el-descriptions-item>
            <el-descriptions-item align="left" label="库区名称">{{ warehouseAreaDesc.warehouseAreaName}}</el-descriptions-item>
            <el-descriptions-item align="left" label="库区面积">{{ warehouseAreaDesc.warehouseAreaArea}}㎡</el-descriptions-item>
            <el-descriptions-item align="left" label="库区负责人">{{ warehouseAreaDesc.warehouseAreaDirector}}</el-descriptions-item>
            <el-descriptions-item align="left" label="库区备注">{{ warehouseAreaDesc.warehouseAreaNotes}}</el-descriptions-item>
            <el-descriptions-item></el-descriptions-item>
            <el-descriptions-item align="left" label="库区创建时间">{{ warehouseAreaDesc.warehouseAreaCreateTime}}</el-descriptions-item>
            <el-descriptions-item align="left" label="库区修改时间">{{ warehouseAreaDesc.warehouseAreaModifyTime}}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions title="仓库详情">
            <el-descriptions-item align="left" label="仓库编号">{{ warehouseDesc.warehouseId }}</el-descriptions-item>
            <el-descriptions-item align="left" label="仓库名称">{{ warehouseDesc.warehouseName}}</el-descriptions-item>
            <el-descriptions-item align="left" label="仓库位置">{{ warehouseDesc.warehousePosition}}</el-descriptions-item>
            <el-descriptions-item align="left" label="仓库面积">{{ warehouseDesc.warehouseArea}}㎡</el-descriptions-item>
            <el-descriptions-item align="left" label="仓库负责人">{{ warehouseDesc.warehouseDirector}}</el-descriptions-item>
            <el-descriptions-item align="left" label="仓库备注">{{ warehouseDesc.warehouseNotes}}</el-descriptions-item>
            <el-descriptions-item align="left" label="仓库创建时间">{{ warehouseDesc.warehouseCreateTime}}</el-descriptions-item>
            <el-descriptions-item align="left" label="仓库修改时间">{{ warehouseDesc.warehouseModifyTime}}</el-descriptions-item>
        </el-descriptions>
    </el-dialog>
</template>

<script setup>

import {ArrowRight} from "@element-plus/icons-vue";
import {onMounted, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import warehouseArea from "@/api/warehouse/warehouseArea.js";
import {ElMessage, ElMessageBox} from "element-plus";
import warehouse from "@/api/warehouse/warehouse.js";

let dialogWarehouseAreaInsert = ref(false)
let dialogWarehouseAreaUpdate = ref(false)
let dialogWarehouseAreaDesc = ref(false)
let searchWarehouseArea = ref({})
let warehouseAreaList = ref([])
let warehouseId = ref()
let router = useRouter()
let route = useRoute()
let pageNum = ref(1)
let total = ref(0)
let insertWarehouseArea = ref({})
let warehouseAreaInsert = ref({})
let warehouseAreaUpdate = ref({})
let warehouseAreaDesc = ref({})
let chooseIds = ref([])
let warehouseDesc = ref({})

function getLocationList(warehouseAreaId){
    router.push("location/" + warehouseAreaId)
}


function loadDesc(warehouseAreaId){
    warehouseArea.loadSearchInfo(warehouseAreaId,warehouseId.value,res=>{
        warehouseAreaDesc.value = res.data
    })
    warehouse.loadUpdateInfo(warehouseId.value,res=>{
        warehouseDesc.value = res.data
    })
    dialogWarehouseAreaDesc.value = true
}


function deleteWHLAList(){
    ElMessageBox.confirm(
        '你确定要删除仓库吗',
        '删除类型',
        {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'error'
        }
    ).then(() => {
        chooseIds.value.forEach(id => {
           warehouseArea.deleteWarehouseArea(id,warehouseId.value,res=>{
               loadWarehouseArea()
           })
        })
        ElMessage({
            type: "success",
            message: "删除成功"
        })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '已取消删除'
        })
    })
}

function deleteTheWarehouseArea(warehouseAreaId){
    ElMessageBox.confirm(
        '你确定要删除库区吗',
        '删除类型',
        {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'error'
        }
    ).then(() => {
        warehouseArea.deleteWarehouseArea(warehouseAreaId,warehouseId.value, res => {
            if (res.code == 1) {
                ElMessage({
                    type: "success",
                    message: "删除成功"
                })
                loadWarehouseArea()
            } else {
                ElMessage({
                    type: "error",
                    message: "网络开了小差，请稍后重试"
                })
            }
        })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '已取消删除'
        })
    })
}

function changeChooses(value){
    let tempIds = new Array();
    value.forEach(warehouseArea => {
        tempIds.push(warehouseArea.warehouseAreaId)
    })
    chooseIds.value = tempIds;
}

function updateHWA(){
    warehouseArea.updateWarehouseArea(warehouseAreaUpdate.value,res=>{
        if (res.code == 1) {
            ElMessage({
                type: "success",
                message: "修改成功"
            })
            loadWarehouseArea()
            cancelUpdate()
        }else if (res.code == 500){
            ElMessage({
                type: "warning",
                message: "仓库面积不足"
            })
        } else{
            ElMessage({
                type: "error",
                message: "修改失败"
            })
        }
    })
}

function insertWHA(){
    warehouseAreaInsert.value.warehouseId = warehouseId.value
    warehouseAreaInsert.value.warehouseAreaStatus = 1
    if (warehouseAreaInsert.value.warehouseAreaName == undefined || warehouseAreaInsert.value.warehouseAreaArea == undefined || warehouseAreaInsert.value.warehouseAreaDirector == undefined){
        ElMessage({
            type: "error",
            message: "缺少关键元素"
        })
        throw new Error("缺少关键元素")
    }
    warehouseArea.insertWarehouseArea(warehouseAreaInsert.value,res=>{
        if (res.code == 1) {
            ElMessage({
                type: "success",
                message: "添加成功"
            })
            loadWarehouseArea()
            cancelInsert()
        }else if (res.code == 500){
            ElMessage({
                type: "warning",
                message: "仓库面积不足"
            })
        } else{
            ElMessage({
                type: "error",
                message: "添加失败"
            })
        }
    })
}

function cancelUpdate(){
    dialogWarehouseAreaUpdate.value = false
    warehouseAreaUpdate.value = new ref({})
}
function updateWarehouseArea(warehouseAreaId){
    dialogWarehouseAreaUpdate.value = true
    warehouseArea.loadSearchInfo(warehouseAreaId,warehouseId.value,res=>{
        warehouseAreaUpdate.value = res.data
    })
}

function cancelInsert(){
    dialogWarehouseAreaInsert.value = false
    warehouseAreaInsert.value = new ref({})
}
function insertWarehouse(){
    dialogWarehouseAreaInsert.value = true
}

function changePage(value){
    pageNum.value = value
    loadWarehouseArea()
}
function cancelSearch(){
    searchWarehouseArea.value.warehouseAreaName = undefined
    loadWarehouseArea()
}
function search(){
    loadWarehouseArea()
}
function loadWarehouseArea(){
  warehouseArea.loadWarehouseAreaList(searchWarehouseArea.value,pageNum.value,10,res=>{
      warehouseAreaList.value = res.list
      total.value = res.total
  })
}

onMounted(()=>{
    warehouseId.value = route.params.warehouseId
    searchWarehouseArea.value.warehouseId =  route.params.warehouseId
    loadWarehouseArea()
    insertWarehouseArea.value.warehouseId = warehouseId.value
})
</script>

<style scoped>

</style>